<template>
  <div id="app">
    <h3>新闻列表</h3>
     <!--解决默认不显示体育新闻的方案一：将体育新闻的地址设置与上一级路由的地址相同 -->
            <nav>
                <router-link to="/newsList/tiyu">体育新闻</router-link>|
                <router-link to="/newsList/yule">娱乐新闻</router-link>|
                <router-link to="/newsList/caijing">财经新闻</router-link>
            </nav>
          <router-view/>
    <!-- 解决默认不显示体育新闻的方案二：设置重定向 -->
    <!--        <nav>-->
    <!--            <router-link to="/newsList/tiyu">体育新闻</router-link>|-->
    <!--            <router-link to="/newsList/yule">娱乐新闻</router-link>|-->
    <!--            <router-link to="/newsList/caijing">财经新闻</router-link>-->
    <!--        </nav>-->

    <!-- to的写法：一级路由的地址可以省略（省略/newsList）-->
    <!--        <nav>-->
    <!--            <router-link to="tiyu">体育新闻</router-link>|-->
    <!--            <router-link to="yule">娱乐新闻</router-link>|-->
    <!--            <router-link to="caijing">财经新闻</router-link>-->
    <!--        </nav>-->

    <!--to的写法：相对地址(不建议)-->
    <!--        <nav>-->
    <!--            <router-link to="./tiyu">体育新闻</router-link>|-->
    <!--            <router-link to="./yule">娱乐新闻</router-link>|-->
    <!--            <router-link to="./caijing">财经新闻</router-link>-->
    <!--        </nav>-->
  </div>
</template>

<script>
export default {
  name: "NewsList"
}
</script>

<style scoped lang="less">
#app {
  text-align: center;

a {
  padding: 5px;
  color: skyblue;
}

//a.router-link-exact-active {
  //    color:red;
  //}
a.active {
  color: red;
  font-weight: bold;
}

//a.router-link-active{
  //  color:red;
  //}
}
</style>